import Rate from '@/components/Rate';
import { eqV1ControllerShowOpen } from '@/services/auto/eq';
import { evaluationV1ControllerShow } from '@/services/auto/evaluation';
import { CopyOutlined, ImportOutlined } from '@ant-design/icons';
import { useParams } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Button, Card, message, Skeleton, Space, Tag, Typography } from 'antd';
import { Fragment, useState } from 'react';
import { find } from 'lodash';
import { getId } from '@/utils';
import Filters from '@/components/Filters';
import { FiltersValue } from '@/components/Filters/types';
import MustLogin from '@/components/MustLogin';
import Avatar from '@/components/Avatar';
import { completeImgUrl, formatDateTime } from 'common/utils/utils';
import {CopyToClipboard} from 'react-copy-to-clipboard';

export default function Mixer() {
  const { uuid } = useParams();

  const { data, loading } = useRequest(
    () => eqV1ControllerShowOpen({ uuid: uuid! }),
    {
      ready: !!uuid,
    },
  );

  const [filtersValue, setFiltersValue] = useState<FiltersValue | undefined>(undefined);

  // 请求频响数据
  const { data: evaluationData, loading: evaluationLoading } = useRequest(
    () => evaluationV1ControllerShow({ uuid: data?.evaluationUuid! }),
    {
      ready: !!data?.evaluationUuid,
      onSuccess: (res) => {
        if (!res) {
          return;
        }
        // 过滤出所选择的模式的频响数据
        const freqDbaDataList = find(
          res.datas,
          (i) => i.project.uuid === 'cdcf35b6-f37c-4b77-877f-9b8ddbf38c5b',
        );

        if (!freqDbaDataList) {
          return;
        }

        const freqDbaData = find(
          freqDbaDataList.children,
          (i) => i.group === data!.dataGroup,
        );

        const filters = data?.filters.map(item => (
          { ...item, id: getId() }
        )) ?? [];

        setFiltersValue({
          freqToDB: freqDbaData!,
          project: freqDbaDataList.project,
          eqs: filters!,
          currentEQId: filters.length > 0 ? filters[0].id : undefined,
        });
      },
    },
  );

  return (
    <div className="center-container pt-[16px]">
      {(() => {
        if (!data || loading || !evaluationData || evaluationLoading) {
          return <Skeleton paragraph={{ rows: 10 }} />;
        }
        return (
          <Fragment>
            <div className="flex">
              <div className="flex-1 min-w-0 mr-[16px]">
                <div className="flex items-center mb-[16px]">
                  <Typography.Title
                    className="mb-0"
                    level={2}
                    ellipsis={{ rows: 2, tooltip: true }}
                  >
                    {data.name}
                  </Typography.Title>
                </div>
                <div className="mb-[8px]">
                  <Tag color="volcano" bordered={false}>
                    基于{`【${data.evaluation.brand.title}】${data.evaluation.title} - ${data.dataGroup}`}
                  </Tag>
                </div>
                <Rate bizUuid={data.uuid} className='mb-[8px]' />
                <Typography.Paragraph type="secondary" className="mb-[8px]">
                  最后修改时间：{formatDateTime(data.updateTime)}
                </Typography.Paragraph>
                {data.desc && (
                  <Typography.Paragraph type="secondary">
                    {data.desc}
                  </Typography.Paragraph>
                )}
                <div>
                  <Space>
                    <MustLogin>
                      <Button
                        className="px-[2px] hover-primary"
                        size="small"
                        type="link"
                        icon={<ImportOutlined />}
                        href={`/personal/mixer?createFromUuid=${data.uuid}`}
                        target='_blank'
                      >
                        <span>导入到我的调音空间试听</span>
                      </Button>
                    </MustLogin>
                    <CopyToClipboard text={`【复制到浏览器，体验大师调音！😎 来自 ${data.user.name}】${location.href}`}
                      onCopy={() => message.success('复制成功')}>
                      <Button
                        className="px-[2px] hover-primary"
                        size="small"
                        type="link"
                        icon={<CopyOutlined />}
                      >
                        <span>复制链接</span>
                      </Button>
                    </CopyToClipboard>
                  </Space>
                </div>
              </div>
              <Card
                style={{ width: 300, height: 118 }}
              >
                <Card.Meta
                  avatar={<Avatar size={76} src={completeImgUrl(data.user.avatar, '?x-oss-process=image/resize,m_fill,w_76,h_76')} userName={data.user.name} />}
                  title={<Typography.Title ellipsis={{ tooltip: true }} level={4} className="mb-0">
                    {data.user.name}
                  </Typography.Title>}
                  description={<Typography.Paragraph
                    className="mb-0"
                    ellipsis={{ rows: 3, tooltip: true }}
                    style={{ fontSize: 12, height: 38 }}
                    type="secondary">
                    {data.user.signature}
                  </Typography.Paragraph>}
                />
              </Card>
            </div>
            <Card className="my-[16px]">
              <Filters value={filtersValue} onChange={setFiltersValue} readOnly />
            </Card>
          </Fragment>
        );
      })()}
    </div>
  );
}
